<!-- 设备列表 -->
<template>
  <div class="equipment-list">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button type="primary" @click="addEquipment">
          <template #icon>
            <icon-plus></icon-plus>
          </template>
          <template #default>新增设备</template>
        </a-button>
      </template>
    </pageHeader>
    <div class="content">
      <div class="content-top">
        <div class="content-header a">
          <a-row class="grid-demo" :gutter="24" style="width: 100%">
            <a-col :span="8">
              <div>
                <a-input-group class="〇">
                  <a-select
                    style="max-width: 42%"
                    v-model="currSelectName"
                    placeholder="请选择"
                  >
                    <a-option value="deviceCoding">设备编号(内部)</a-option>
                    <a-option value="deviceName">设备名称</a-option>
                    <a-option value="responsiblePerson">负责人</a-option>
                  </a-select>
                  <a-input-search
                    search-button
                    :style="{
                      backgroundColor: '#fff',
                      flex: 1,
                    }"
                    placeholder="请输入"
                    v-model="currSelectVal"
                    @change="search"
                  >
                  </a-input-search> </a-input-group
              ></div>
            </a-col>
            <a-col :span="8">
              <div>
                <a-input-group class="〇">
                  <a-input-search
                    search-button
                    placeholder="请输入"
                    v-model="currSupplierName"
                    @change="search"
                  >
                    <template #prefix>供应商名称：</template>
                    <template #button-icon>
                      <icon-search @click="search" />
                    </template>
                    <template #button-default> 搜索 </template>
                  </a-input-search>
                </a-input-group></div
              >
            </a-col>
            <a-col :span="8">
              <div>
                <a-input-group class="〇">
                  <a-select
                    placeholder="请选择"
                    v-model="currgGoodStateId"
                    @change="search"
                  >
                    <template #prefix>设备状态：</template>
                    <a-option
                      v-for="item in goodStateList.list"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    ></a-option>
                  </a-select> </a-input-group
              ></div>
            </a-col>
          </a-row>
          <a-row class="grid-demo" :gutter="24" style="width: 100%">
            <a-col :span="8">
              <div>
                <a-input-group class="〇">
                  <a-select
                    placeholder="请选择"
                    v-model="currUseStateId"
                    @change="search"
                  >
                    <template #prefix>设备使用状态：</template>
                    <a-option
                      v-for="item in useStateList.list"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    ></a-option>
                  </a-select> </a-input-group
              ></div>
            </a-col>
            <a-col :span="8">
              <div>
                <div class="〇" style="display: flex">
                  <div
                    style="
                      background-color: #f2f3f5;
                      height: 32px;
                      text-align: center;
                      line-height: 32px;
                      padding: 0 10px;
                    "
                    >投产时间：
                  </div>
                  <a-range-picker
                    v-model="resDate"
                    style="width: 360px; flex: 1"
                    show-time
                    format="YYYY-MM-DD HH:mm"
                    @ok="(e, a) => onOk(e as string[], a)"
                    @clear="clear"
                    value-format="x"
                  /> </div
              ></div>
            </a-col>
            <a-col :span="8">
              <div>
                <div
                  class="〇"
                  style="
                    display: flex;
                    align-items: center;
                    background-color: #f2f3f5;
                  "
                >
                  <span style="padding-left: 5px">产能：</span>
                  <a-input-group>
                    <a-input-number
                      :min="1"
                      v-model="capacity.UnitCapacityMinimum"
                      :style="{ width: '160px' }"
                      placeholder="最小产能"
                    />
                    <a-input
                      :style="{ width: '40px' }"
                      placeholder="——"
                      disabled
                    />
                    <a-input-number
                      :min="1"
                      v-model="capacity.UnitCapacityMaximum"
                      :style="{ width: '160px' }"
                      placeholder="最大产能"
                    />
                  </a-input-group> </div
              ></div>
            </a-col>
          </a-row>
        </div>
        <div class="content-header b">
          <a-space direction="vertical" fill>
            <a-row class="grid-demo" :gutter="24" style="width: 100%">
              <a-col :span="12">
                <a-button type="outline" @click="reset">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  <template #default>重置</template>
                </a-button>
              </a-col>
              <a-col :span="12">
                <a-button status="success">
                  <template #icon>
                    <icon-download />
                  </template>
                  <template #default>导入</template>
                </a-button>
              </a-col>
            </a-row>
            <a-row class="grid-demo" :gutter="24" style="width: 100%">
              <a-col :span="12">
                <a-button status="warning">
                  <template #icon>
                    <icon-export :rotate="-90" />
                  </template>
                  <template #default>导出</template>
                </a-button>
              </a-col>

              <a-col :span="12">
                <a-button type="primary" @click="showFormHeaderSetting">
                  <template #default>表头设置</template>
                </a-button>
              </a-col>
            </a-row>
          </a-space>
        </div>
      </div>
      <div>
        <div>
          <a-alert
            banner
            type="error"
            :style="{
              cursor: 'pointer',
            }"
            @click="goRepairList"
            >设备维修提醒：有
            <span
              :style="{
                color: 'red',
              }"
            >
              {{ waitJobCount }}
            </span>
            台设备需要待派工维修，请尽快处理！
          </a-alert>
        </div>
        <div
          :style="{
            marginTop: '10px',
          }"
        >
          <a-alert
            banner
            type="warning"
            :style="{
              cursor: 'pointer',
            }"
            @click="goUpKeepList"
            >设备保养提醒：有
            <span
              :style="{
                color: '#ef8432',
              }"
              >{{ waitMaintainCount }}</span
            >
            台设备需要待派工保养，请尽快处理！
          </a-alert>
        </div>
      </div>
      <a-divider />
      <div>
        <TableTurn :args="args" :tableData="getData" ref="tableRef">
          <a-table-column :width="80" align="center">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            :title="item.name"
            v-for="(item, index) in selectedHeader"
            :key="index"
            :data-index="item.code"
            align="center"
            :width="200"
            :sortable="{
              sortDirections: ['ascend', 'descend'],
            }"
          >
            <template v-if="item.code === 'goodState'" #cell="{ record }">
              {{ changeGoodState(record.goodState) }}
            </template>
            <template v-else-if="item.code === 'workshop'" #cell="{ record }">
              {{ record.aa }}
              {{ isWorkshop(record.workshopId) }}
            </template>
            <template v-else-if="item.code === 'spareLoad'" #cell="{ record }">
              {{ record.aa }}
              {{ `${record?.spareLoad ? record?.spareLoad : 0}%` }}
            </template>
            <template
              v-else-if="item.code === 'supplierName'"
              #cell="{ record }"
            >
              {{ record.aa }}
              {{ isSupplierList(record.supplierID) }}
            </template>

            <template v-else-if="item.code === 'useState'" #cell="{ record }">
              <div class="use-state">
                <div
                  class="cycle"
                  :class="
                    record.useState === 2
                      ? 'running-cycle'
                      : record.useState === 4
                      ? 'repairing-cycle'
                      : record.useState === 6
                      ? 'maintaining-cycle'
                      : record.useState === 1
                      ? 'free-cycle'
                      : record.useState === 3 || record.useState === 5
                      ? 'stop-cycle'
                      : 'fault-cycle'
                  "
                >
                </div>
                <div
                  :class="
                    record.useState === 2
                      ? 'running'
                      : record.useState === 4
                      ? 'repairing'
                      : record.useState === 6
                      ? 'maintaining'
                      : record.useState === 1
                      ? 'free'
                      : record.useState === 3 || record.useState === 5
                      ? 'stop'
                      : 'fault'
                  "
                >
                  {{ record.useStateName }}
                </div>
              </div>
            </template>
            <template
              v-else-if="item.code === 'productionDate'"
              #cell="{ record }"
            >
              {{ dayjs(record.productionDate).format('YYYY-MM-DD') }}
            </template>
            <template
              v-else-if="item.code === 'unitCapacity'"
              #cell="{ record }"
            >
              {{ record.unitCapacity.count }}
            </template>
          </a-table-column>

          <!-- 操作item -->
          <a-table-column
            align="center"
            :width="150"
            fixed="right"
            title="操作"
          >
            <template #cell="{ record }">
              <a-tooltip content="档案详情">
                <IconFont
                  type="icon-details-def"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                  }"
                  @click="goDetail(record.id)"
                />
              </a-tooltip>
              <a-tooltip :content="record.isEnabled ? '启用' : '停用'">
                <a-popconfirm
                  @ok="changeState(record.id, record.isEnabled)"
                  content="确定修改状态吗？"
                  type="error"
                >
                  <IconFont
                    :type="record.isEnabled ? 'icon-tingyong' : 'icon-qiyong'"
                    :size="26"
                    :style="{
                      marginRight: '10px',
                      cursor: 'pointer',
                    }"
                  />
                </a-popconfirm>
              </a-tooltip>
              <!-- <a-popconfirm
                @ok="changeState(record.id, record.isEnabled)"
                content="确定修改状态吗？"
                type="error"
              >
                <a-button
                  :style="{
                    color: record.isEnabled ? '' : 'red',
                  }"
                  type="text"
                >
                  {{ record.isEnabled ? '启用' : '停用' }}
                </a-button>
              </a-popconfirm> -->
              <a-tooltip content="报废">
                <IconFont
                  type="icon-baofei"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                  }"
                  @click="openScrap(record)"
                />
              </a-tooltip>

              <!-- <a-button type="text" @click="goStatet(record.id, 32)">
                开始维修
              </a-button>
              <a-button type="text" @click="goStatet(record.id, 34)">
                开始保养
              </a-button> -->
            </template>
          </a-table-column>
        </TableTurn>
      </div>
    </div>
    <FormHeaderSetting
      v-model:visible="formHeaderSettingVisible"
      title="设备列表表头设置"
      :resultList="headerSetting.list"
      @headerSave="headerSave"
    ></FormHeaderSetting>
  </div>
  <ScrapModal :type="1" v-model:visible="scrapshow" :form="scrapData.data" />
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import { useRouter } from 'vue-router';
  import { reactive, ref, computed, onMounted, watch } from 'vue';
  import dayjs from 'dayjs';
  import { formHeaderSetting } from '@/types/global';
  import {
    GetEquipmentState,
    GetEquipmentGoodState,
  } from '@/api/equipment-management/base-setting';
  import {
    GetEquipmentList,
    GetEquipmentListHeader,
    PutEquipmentListHeader,
    PutEquipmentListState,
    PutUseStatet,
  } from '@/api/equipment-management/equipment-list';
  import { GetSupplierPrimaryList } from '@/api/buy-management/supplier-management/supplier-primary-list';

  import {
    GetFaultEquipmentList,
    GetMaintenanceEquipment,
  } from '@/api/equipment-management/equipment-maintain-manager';
  import { GetWorkshopPage } from '@/api/FactoryModeling';
  import ScrapModal from './scrap-modal/index.vue';

  const router = useRouter();
  const scrapData = reactive({ data: {} });
  const scrapshow = ref(false);
  const title: string = '设备列表';
  const breadCrumb: string[] = ['设备管理', '设备列表'];
  const headerListJSON = [
    {
      code: 'deviceCoding',
      isDefault: 1,
      name: '设备编码',
    },
    {
      code: 'manufacturerNumber',
      isDefault: 1,
      name: '设备厂商编号',
    },
    {
      code: 'deviceName',
      isDefault: 1,
      name: '设备名称',
    },
    {
      code: 'supplierName',
      isDefault: 1,
      name: '供应商名称',
    },
    {
      code: 'specification',
      isDefault: 1,
      name: '规格',
    },
    {
      code: 'modelNumber',
      isDefault: 1,
      name: '型号',
    },
    {
      code: 'deviceType',
      isDefault: 1,
      name: '设备类型',
    },
    {
      code: 'deviceUse',
      isDefault: 1,
      name: '设备用途',
    },
    {
      code: 'workshop',
      isDefault: 1,
      name: '车间',
    },
    {
      code: 'storageLocation',
      isDefault: 1,
      name: '存放位置',
    },
    {
      code: 'responsiblePersonName',
      isDefault: 1,
      name: '负责人',
    },
    {
      code: 'productionDate',
      isDefault: 1,
      name: '投产日期',
    },
    {
      code: 'maintenanceWarning',
      isDefault: 1,
      name: '保养预警',
    },
    {
      code: 'unitCapacity',
      isDefault: 1,
      name: '单位产能',
    },
    {
      code: 'brand',
      isDefault: 1,
      name: '设备品牌',
    },
    {
      code: 'capacityLoad',
      isDefault: 1,
      name: '产能负荷',
    },
    {
      code: 'goodState',
      isDefault: 1,
      name: '设备完好状态',
    },
    {
      code: 'useState',
      isDefault: 1,
      name: '设备使用状态',
    },
  ];
  const useState = [
    { id: 1, name: '空闲中' },
    { id: 2, name: '使用中' },
    { id: 3, name: '待维修' },
    { id: 4, name: '维修中' },
    { id: 5, name: '待保养' },
    { id: 6, name: '保养中' },
    { id: 7, name: '报废' },
  ];
  // 表格配置
  const args = reactive({
    stripe: true,
    rowSelection: {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    },
    // scroll: {
    //   y: 500,
    // },
    bordered: {
      headerCell: true,
    },
    rowKey: 'deviceCoding', // 批量选择按钮以设备编码来作为key
  });

  let tableRef = ref(); // 储存table的ref

  const form = reactive({
    list: {},
  });

  let currSelectVal = ref(''); // 第一个下拉框的搜索值
  let currSelectName = ref('deviceCoding'); // 第一个下拉框的名称

  let currSupplierName = ref(''); // 储存供应商搜索框的值
  // 储存当前选择的设备使用状态id
  const resDate: any[] = reactive([]);
  // 单位产能边界
  const capacity = reactive({
    UnitCapacityMinimum: undefined,
    UnitCapacityMaximum: undefined,
  });
  let currUseStateId = ref(undefined);
  // 投产时间
  const productionDate = {
    productionTimeGe: 0, //左边
    productionTimeLe: 0, // 右边
  };

  // 储存当前选择的设备完美状态id
  let currgGoodStateId = ref(undefined);
  // 获取表格数据
  const getData = async (pageData?: any) => {
    try {
      const data: any = {};
      if (
        capacity.UnitCapacityMinimum &&
        capacity.UnitCapacityMaximum &&
        capacity.UnitCapacityMinimum > capacity.UnitCapacityMaximum
      ) {
        Message.error('最小产能大于最大产能');
        return;
      }
      if (capacity.UnitCapacityMinimum && capacity.UnitCapacityMaximum) {
        data.UnitCapacityMinimum = capacity.UnitCapacityMinimum;
        data.UnitCapacityMaximum = capacity.UnitCapacityMaximum;
      }
      if (
        productionDate.productionTimeGe &&
        productionDate.productionTimeLe &&
        productionDate.productionTimeGe < productionDate.productionTimeLe
      ) {
        data.productionTimeGe = productionDate.productionTimeGe;
        data.productionTimeLe = productionDate.productionTimeLe;
      }
      if (
        currSelectName.value.trim() !== '' &&
        currSelectVal.value.trim() !== ''
      )
        data[currSelectName.value] = currSelectVal.value;
      if (currUseStateId.value && currUseStateId.value !== 0)
        data.useStateId = currUseStateId.value;
      if (currgGoodStateId.value && currgGoodStateId.value !== 0)
        data.goodStateId = currgGoodStateId.value;
      if (currSupplierName.value.trim() !== '')
        data.supplierName = currSupplierName.value;
      const res: any = await GetEquipmentList({
        ...pageData,
        ...data,
      });
      res?.content?.forEach((ele: any) => {
        ele.useStateName = useState.filter(
          (item) => ele.useState === item.id
        )[0]?.name;
      });

      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  const workshop: any = reactive({ data: [] });
  // 供应商下拉框数据
  const supplierList = reactive<any>({
    list: [],
  });
  const init = async () => {
    let res3 = await GetWorkshopPage({
      page: 1,
      size: -1,
    });
    let res1 = await GetSupplierPrimaryList({ page: 1, size: -1 });
    workshop.data = res3.content;
    supplierList.list = res1.content;
  };
  const isWorkshop = (id: any) => {
    const name = workshop.data.filter((ele: any) => ele.id === id)[0]?.name;
    if (!name) return '暂无';
    return name;
  };
  const isSupplierList = (id: any) => {
    const name = supplierList.list.filter((ele: any) => ele.id === id)[0]?.name;
    if (!name) return '暂无';
    return name;
  };
  init();
  // 储存表头数据
  const headerSetting = reactive<formHeaderSetting>({
    list: [],
  });

  let formHeaderSettingVisible = ref<boolean>(false); // 是否显示表头设置组件

  // 表头设置按钮
  const showFormHeaderSetting = () => {
    formHeaderSettingVisible.value = true;
  };

  // 获取表头设置列表
  const getHeaders = async () => {
    try {
      const tableHead = await GetEquipmentListHeader({
        userId: 2,
      });
      headerSetting.list = tableHead.extends;
    } catch (error: unknown) {
      console.log(error);
    }
  };
  getHeaders();

  // 在表格上显示的表头
  const selectedHeader = computed(() => {
    const arr: formHeaderSetting['list'] = [];
    headerSetting.list.forEach((item) => {
      if (item.isDefault === 1) {
        arr.push(item);
      }
    });
    return arr;
  });

  // 表头设置保存后返回的自定义事件
  const headerSave = async (headerList: formHeaderSetting['list']) => {
    try {
      const data = {
        userId: 2,
        extend: JSON.stringify(headerList),
      };
      await PutEquipmentListHeader(data);
      headerSetting.list = [...headerList];
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 储存设备使用状态数据
  const useStateList = reactive<any>({
    list: [],
  });

  // 储存设备完美状态数据
  const goodStateList = reactive<any>({
    list: [],
  });

  // 储存车间数据
  const workshopList = reactive<any>({
    list: [],
  });

  // 获取设备完美状态、使用状态、车间的下拉框数据
  const getBasicData = async () => {
    const [equipmentState, equipmentGoodState] = await Promise.all([
      GetEquipmentState({ type: 2 }),
      GetEquipmentGoodState({ type: 3 }),
    ]);
    useStateList.list = equipmentState;

    // 把筛选的全部也加进去
    useStateList.list.unshift({
      id: 0,
      name: '全部',
    });
    goodStateList.list = equipmentGoodState;
    goodStateList.list.unshift({
      id: 0,
      name: '全部',
    });
  };
  getBasicData();

  const addEquipment = (): void => {
    router.push({
      name: 'EquipmentListAdd',
      query: {
        type: 'add',
      },
    });
  };

  // 将获取的设备使用状态id转换成对应的名称
  // const changeUseState = (id: number) => {
  //   for (let i of useStateList.list) {
  //     if (id === i.id) {
  //       return i.name;
  //     }
  //   }
  // };

  const changeUseState = (id: number) => {
    const item = useStateList.list.find((i: any) => i.id === id);
    return item ? item.name : null;
  };

  // 将获取的设备完好状态id转换成对应的名称
  // const changeGoodState = (id: number) => {
  //   for (let i of goodStateList.list) {
  //     if (id === i.id) {
  //       return i.name;
  //     }
  //   }
  // };

  const changeGoodState = (id: number) => {
    const item = goodStateList.list.find((i: any) => i.id === id);
    return item ? item.name : null;
  };

  // 点击横幅去往维修列表
  const goRepairList = () => {
    // router.push({
    //   name: 'MaintenanceWaitList',
    // });
    router.push({
      name: 'MaintenanceList',
    });
  };

  // 点击横幅去往保修列表
  const goUpKeepList = () => {
    // router.push({
    //   name: 'UpkeepWaitList'
    // });
    router.push({
      name: 'UpkeepList',
    });
  };

  // 每当用户按了搜索或选择了下拉框都调用一次
  const search = () => {
    tableRef.value.loadData();
  };
  // 投产时间搜索
  const onOk = (e: string[], a: Date[]) => {
    productionDate.productionTimeGe = +a[0];
    productionDate.productionTimeLe = +a[1];
    resDate[0] = e[0];
    resDate[1] = e[1];
    search();
  };
  const clear = () => {
    resDate[0] = null;
    resDate[1] = null;
    productionDate.productionTimeGe = 0;
    productionDate.productionTimeLe = 0;
    search();
  };
  // 监听键盘回车，按了回车也会查询
  const keyDown = (e: any) => {
    if (e.keyCode === 13) {
      search();
    }
  };
  let waitJobCount = ref(0); // 待派工维修数量
  let waitMaintainCount = ref(0); // 待派工保养数量
  onMounted(async () => {
    try {
      waitJobCount.value = 0;
      waitMaintainCount.value = 0;
      const res: any = await Promise.all([
        // 获取所有待派工维修数据
        GetFaultEquipmentList({
          page: 0,
          size: -1,
          repairState: 1,
          authority: 1,
        }),
        // 获取所有待派工保养数据
        GetMaintenanceEquipment({
          page: 0,
          size: -1,
          maintainState: 1,
        }),
      ]);
      // 获取横幅的数据，待派工状态
      waitJobCount.value = res[0]?.content.length;
      waitMaintainCount.value = res[1]?.content.length;
      // 监听键盘事件
      window.addEventListener('keydown', keyDown);
    } catch (error: unknown) {
      console.log(error);
    }
  });

  // 重置
  const reset = () => {
    currSelectVal.value = '';
    currSelectName.value = '';
    currSupplierName.value = '';
    currUseStateId.value = undefined;
    currgGoodStateId.value = undefined;
    productionDate.productionTimeGe = 0;
    productionDate.productionTimeLe = 0;
    productionDate.productionTimeGe = 0;
    productionDate.productionTimeLe = 0;
    capacity.UnitCapacityMaximum = undefined;
    capacity.UnitCapacityMinimum = undefined;
    resDate.length = 0;
    tableRef.value.loadData();
  };

  // 去往档案详情
  const goDetail = (id: number) => {
    router.push({
      name: 'EquipmentListDetail',
      query: {
        id,
        type: 'edit',
      },
    });
  };
  // 修改设备状态
  const goStatet = async (id: number, state: number) => {
    await PutUseStatet({ id, useStateId: state });
  };
  // 点击修改启用或停用状态
  const changeState = async (id: number, isEnabled: boolean) => {
    try {
      await PutEquipmentListState({
        id,
        isEnabled: !isEnabled,
      });
      tableRef.value.loadData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const openScrap = (data: any) => {
    scrapshow.value = true;
    scrapData.data = cloneDeep(data);
  };
  watch(
    () => scrapshow.value,
    (val) => {
      if (!val) {
        scrapData.data = {};
      }
    }
  );
</script>

<style scoped lang="less">
  .equipment-list {
    :deep(.arco-table-tr) {
      height: 40px;
    }
    .content {
      padding: 5px 10px;
      .content-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .content-header {
          display: flex;
          flex-wrap: wrap;

          // height: 40px;
          // margin-bottom: 10px;
          // margin-top: 5px;
          // :deep(.arco-btn-secondary) {
          //   // color: #165dff;
          // }
        }
        .a {
          display: flex;
          width: 80%;
          .〇 {
            width: 100%;
            margin: 0 10px 10px 0;
          }
        }
        .b {
          display: flex;
          // margin: 0 10px 10px 0;
          width: 12%;
        }
      }
      // padding: 0 40px;

      .use-state {
        display: flex;
        justify-content: center;
        text-align: center;
        .cycle {
          position: relative;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          content: '';
          display: inline-block;
          top: 3px;
          right: 10px;
        }
      }

      // 运行中
      .running {
        color: #31c273;
      }
      .running-cycle {
        background-color: #31c273;
      }

      // 维修中
      .repairing {
        color: #f77234;
      }
      .repairing-cycle {
        background-color: #f77234;
      }
      // 保养中
      .maintaining {
        color: #14c9c9;
      }
      .maintaining-cycle {
        background-color: #14c9c9;
      }
      // 空闲
      .free {
        color: #868686;
      }
      .free-cycle {
        background-color: #868686;
      }
      // 停用
      .stop {
        color: #ffcc33;
      }
      .stop-cycle {
        background-color: #ffcc33;
      }
      // 故障
      .fault {
        color: #ff0000;
      }
      .fault-cycle {
        background-color: #ff0000;
      }
    }
  }
</style>
